<template>
	<view class="flex-direction flex container">
		<!-- <view class="map flex-sub"> -->
		<map id="bgMap" :longitude="state.mapLongitude" :latitude="state.mapLatitude" show-location="true"
			:scale="state.scale" :markers="state.covers"></map>
		<!-- </view> -->
		<view class="storeBox">
			<!-- <view class="title flex">
				<view class="lftext">门店地址</view>
				<view class="flex-sub text-cut rtext">
					<text class="adico econweizhidingwei"></text>
					上次去过：{{ visitedName }}
				</view>
			</view> -->
			<view class="tit_search_box">
				<view class="cu-bar search bg-white">
					<view class="search-form round">
						<view class="cuIcon-search titsbtn"></view>
						<!-- <input @confirm="searchAction" v-model="searchKey" type="text" placeholder="请输入门店名称" confirm-type="search" @blur="searchAction"></input> -->
						<input v-model="searchKey" type="text" :placeholder="propScope=='1120'?'请输入自取门店名称':propScope=='1130'? '请输入自堂食店名称': '请输入门店名称'" @blur="searchAction"
							@focus="handleFocus"></input>
					</view>
				</view>
				<view class="search_bot flex text-lg">
					<view class="flex-sub border-r" @click="favoriteAddress">
						<text class="fcon-shoucang org seIco" :class="{ 'fcon-yishoucang': flagAddres }"></text>
						<text :class="{ 'hoverFcon': flagAddres }">我常去的</text>
					</view>
					<view class="flex-sub" @click="lasttimeAddres">
						<text class="fcon-dingwei seIco"></text>
						<tetx :class="{ 'hoverFcon': last_time }">上次去的</tetx>
					</view>
				</view>
			</view>
			<view v-if="searchKey!=''&&searchedKey&&addressStore.length==0"
				class="empty_box text-center flex flex-direction align-center justify-center">
				<view>
					没有搜索到此门店
				</view>

			</view>
			<scroll-view class="list-scroll-content" id="shipSelf" scroll-y>
				<view class="shipping-self touch">
					<!-- 门店自提 -->
					<empty positions="absolute" :empty="addressStore.length<=0"
						:imgUrl="'https://cdn-static.yekjx.com/'+'food/empty/images/empty_ico04.png'" :content="propScope=='1120'?'暂无门店支持自取':propScope=='1130'? '暂无门店支持堂食': '暂无数据'">
					</empty>
					<view class="scroll-item" v-for="(item, index) in addressStore" :key="index"
						:class="{ active: storeClass == index }" @click="selectMd(item, index)">
						<view class="flex align-center item" :class="{'solid-bottom':index<(addressStore.length-1)}">
							<view class="selc cuIcon-check" :class="{ selc: storeClass == index }"></view>
							<view class="flex-sub">
								<view class="flex justify-between">
									<view class="text-lg text-bold padding-right-sm" style="position: relative;" @click.stop="detailsMd(item,index)" :class="{ active: storeClass == index }">
                    <text v-if="item.attentionGoodsId" @click.stop="cancelCollection(item.attentionGoodsId,item.nmember_id)"
                    	class="fcon-yishoucang " style="color: #53a87f;font-size: 30rpx;"></text>
                    <text v-else class="fcon-shoucang text-c9"
                    	@click.stop="getCollection(item.nmember_id)"
                    	style="font-size: 30rpx;"></text>
                    <text class="margin-left-xs vnick-style">{{ item.vnick }}</text>
										<!-- (item.ext&&!item.ext.isSubscribe)||!item.ext -->
										<text v-if="!(item.work_status=='233' || item.work_status=='974')" class="text-sm text-c9 text-nomal">(暂未开通)</text>
                    <text class="cuIcon-right" v-else></text>
                      <!-- <text class="lizuijing flex justify-center align-center" v-if="index === 0">
                        离你最近
                      </text> -->
									</view>
									<view class="distance text-df text-end">
										{{userStore.getAdresGps&&userStore.getAdresGps.hasGps?'距离':'距您'}}{{ item.distance ? item.distance : '0' }}{{ item.distanceUnit ? item.distanceUnit : 'm' }}
									</view>
								</view>
								<view class="item-ms">
									<text class="cuIcon-time ico"></text>
									<text>{{ item.vstartTime ? getvstime(item.vstartTime,item.vendTime) : '营业时间未知' }}</text>
								</view>
								<view class="item-ms flex align-center">
									<view class="flex-sub itmlocal">
										<text class="cuIcon-location ico"></text>
										<text>{{ item.vaddress ? item.vaddress : '' }}</text>
									</view>
									<view class="toStoreBtn" @click.stop="gotoMap(item)">
										到这去
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="ship-btn flex text-center">
						<view class="flex-sub" @tap="toggleShipping()">取消</view>
						<view class="defin flex-sub" @tap="toggleShipping()">确定</view>
					</view>	 -->
				</view>
			</scroll-view>
		</view>
		<!-- <loading></loading> -->
	</view>
  <uni-popup ref="storeInfo" type="bottom" zindex :safe-area="true" background-color="#fff"> 
  	<view class="storeInfo_c" v-if="addressStoreData">
  		<view class="titles_c">门店信息</view>
  		<view class="c_cont_n">
  			<view class="cont_na">
  				{{addressStoreData.vnick}}
  				<text class="fcon-shoucang" style="font-size: 32rpx;margin-left: 10rpx;color:#53A87F;"
  					v-if="true" :class="{ 'fcon-yishoucang': addressStoreData.attentionGoodsId }"
  					@click="collectionBtn"></text>
  				<!-- <text class="fcon-shoucang" style="font-size: 32rpx;margin-left: 10rpx;color:#53A87F;" v-else
  							@tap="isCollection=!isCollection"></text> -->
  			</view>
  			<view class="cont_na_l" @click.stop="gotoMap(addressStore)">
  				<text class="fcon-dingwei" style="font-size: 28rpx;margin-right: 3rpx;color:#333"></text>
  				距您{{addressStoreData.distance}}{{addressStoreData.distanceUnit}}
  			</view>
  		</view>
  		<view class="door_inf">{{addressStoreData.vstartTime.slice(0, 2)}}:{{addressStoreData.vstartTime.slice(2)}} - {{addressStoreData.vendTime.slice(0, 2)}}:{{addressStoreData.vstartTime.slice(2)}}</view>
  		<view class="door_inf" @click="makeCall(addressStoreData.vphone)">{{addressStoreData.vphone}}<text
  				class="fcon-dianhua tels"></text></view>
  		<view class="door_inf">{{addressStoreData.vaddress}}</view>
  		<view class="invs"></view>
  		<view class="store_bt">
  			<view class="bt_item"
  				@click.stop="mnavTo('/pages/others/storeQual/storeQual?nsell_member_id=' + addressStoreData.nmember_id)">
  				查看门店服务资质<text class="fcon-Vector"
  					style="font-weight:700;font-size: 20rpx;color:#53A87F;margin-left:10rpx;"></text>
  			</view>
  			<!-- 	<view class="bt_item" @click.stop="mnavTo('/pages/others/foodArchives/foodArchives')">
  						查看食品安全档案<text class="fcon-Vector"
  							style="font-weight:700;font-size: 20rpx;color:#53A87F;margin-left:10rpx;"></text>
  					</view> -->
  		</view>
  	</view>
  </uni-popup>
</template>

<script lang="ts" setup>
	import { ref, reactive, toRaw } from "vue";
	import { onShow, onLoad, onReachBottom, onPullDownRefresh,onHide } from '@dcloudio/uni-app';
	import { showLoading, hideLoading, mnavTo } from '@/utils/helper';
	import { getStoreList, getFollowStoreList, getLastTimeMd, collectStore, cancelCollectStore } from '@/api/vmeitime-http/index.js'
	import global from '@/utils/global';
	import { useShopStore } from '@/stores/shopStore';
	import { useUserStore } from '@/stores/commonStore';
	import mapi from '@/utils/mapi';
	const shopStore = useShopStore()
	const userStore = useUserStore()
	let state = reactive({
		latitude: 28.208399,
		longitude: 113.06463,
		mapLatitude: 28.208399,
		mapLongitude: 113.06463,
		covers: [],
		scale: 14, //地图层级，取值范围为5-18，默认16，14最优，11看长沙市
	})
	const longitude = ref()
	const latitude = ref()
	const propScope = ref()
	const curPage = ref(1)
	const pageSize = ref(200)
	const source = ref()
	const storeClass = ref()
	const shopData = ref([])  //收藏的门店位置
	const flagAddres = ref(null)  //是否收藏的状态
	const last_time = ref(null)  //上一次去的
	const searchedKey = ref(false) //搜索是否有数据
	const searchKey = ref('')
	const isLogin = ref(false)
  const storeInfo = ref()
  const addressStoreData = ref() //选中的门店位置
	const addressStore = ref([    //门店位置
		// {
		// 	vnick:'隆平园店',
		// 	distance:'0',
		// 	distanceUnit:'m',
		// 	vstartTime:'10:00',
		// 	vendTime:'19:00',
		// 	vaddress:'湖南省长沙市芙蓉区亚大路87号',
		// 	vgps: '113.06463,28.208399'
		// },
		// {
		// 	vnick:'颐而康中交广场店',
		// 	distance:'2.9',
		// 	distanceUnit:'km',
		// 	vstartTime:'10:00',
		// 	vendTime:'19:00',
		// 	vaddress:'湖南省长沙市芙蓉区人民东路中交广场(喜欢里天街)D栋3楼',
		// 	vgps: '113.0737,28.19159'
		// },
		// {
		// 	vnick:'颐而康长沙广电店',
		// 	distance:'2.62',
		// 	distanceUnit:'km',
		// 	vstartTime:'10:00',
		// 	vendTime:'19:00',
		// 	vaddress:'湖南省长沙市开福区三一大道高速公路管理局裙楼401',
		// 	vgps: '113.05441,28.230527'
		// }
	])
	//搜索的时候隐藏我的收藏和上一次去的
	const handleFocus = () => {
		flagAddres.value = false
		last_time.value = false
	}
	const getvstime = (st, et) => {
		let r = '';
		if (!st || !et) {
			return '营业时间未知'
		}
		r = st.substring(0, 2) + ':' + st.substring(2, 4) + '-' + et.substring(0, 2) + ':' + et.substring(2, 4);
		return r
	}
	//搜索
	const searchAction = () => {
		console.log(searchKey.value)
		if (searchKey.value == "") {
			// uni.showToast({
			// 	title: '请输入您想去的门店',
			// 	icon: 'none',
			// 	mask: true
			// })
			getCarLists(longitude.value, latitude.value)
			return;
		}
		queryMemberList()
	}
	//搜索
	const queryMemberList = async () => {
		const paramData = {
			longitude: longitude.value || 113.06463,
			latitude: latitude.value || 28.208399,
			vtype_two_category: 0,
			vtype: '835',
			// nmember_id: 152998,
			curPage: curPage.value,
			pageSize: pageSize.value,
			vnick: searchKey.value
		};
		await fetchStoreList(paramData, getStoreList, 'search');
	}
	//收藏接口
	const getCollection = async (id : any) => {
		try {
			showLoading()
			let res = await collectStore({
				vtype: '835',
				vobject_id: id
			})
			if (res.object.pushCache) {
				hideLoading();
				mapi.msg('收藏成功!');
				// Collection.value = true
				// nowPlan.value.attentionGoodsId = res.object.attention_goods_id
				const indexNum = addressStore.value.findIndex((item : any) => {
					return item.nmember_id == id
				})

				addressStore.value[indexNum].attentionGoodsId = res.object.attention_goods_id
				console.log('收藏index-----------------------------------------', res, indexNum, addressStore.value[indexNum])
			}
		} catch (e) {
			hideLoading();
			mapi.msg('收藏失败!');
		}
	}
	//取消收藏
	const cancelCollection = async (id : any, nmember_id : any) => {
		try {
			showLoading()
			let res = await cancelCollectStore({
				attentionGoodsId: id
			})
			if (res.object) {
				hideLoading();
				const indexNum = addressStore.value.findIndex((item : any) => {
					return item.nmember_id == nmember_id
				})
				addressStore.value[indexNum].attentionGoodsId = res.object.attention_goods_id
				if (flagAddres.value && !last_time.value) {
					const paramData = {
						nowLongitude: longitude.value,
						nowLatitude: latitude.value,
						vtype: 835,
					};
					await fetchStoreList(paramData, getFollowStoreList);
				}
				mapi.msg('取消收藏成功!');
			}
			// nowPlan.value.attentionGoodsId = null 
		} catch (e) {
			hideLoading();
			mapi.msg('收藏失败!');
		}
	}
	const selecShopId = ref(null);
	// 选择门店
	const selectMd = (item : any = {}, index : any) => {
		if (!(item.work_status == '233' || item.work_status == '974')) {
			return
		}
		//如果选择的门店不等于当前门店，则退出再来一单模式
		if(item.nmember_id!=shopStore.curSellerMemberId){
			shopStore.setOrderAgain(false)
		}
		if (source.value) {
			storeClass.value = index
			source.value=='recharge'?shopStore.setRechargeShop(item):shopStore.setShop(item);
		  source.value === 'checkstore' && uni.setStorageSync('checkedDoor', true);
			source.value!='recharge'&&shopStore.setSlecShopType('hand')
			uni.navigateBack()
		}
		// getcancelCollectdetails({
		// 	// nmember_id: '152998',
		// 	vobject_id: item.nmember_id
		// })
	}
	// 到这去
	const gotoMap = (item : AnyObject) => {
		uni.openLocation({
			longitude: Number(item.vgps.split(',')[0]),
			latitude: Number(item.vgps.split(',')[1]),
			scale: 17, //5-18，默认18
			name: item.vnick,
			address: item.vaddress
		});
	}
  //门店详情
  //收藏
  const collectionBtn = (item:AnyObject) => {
  	// isCollection.value = !isCollection.value
  	if (!addressStoreData.value.attentionGoodsId) {
  		// console.log('收藏-------------------------', addressStoreData.value.attentionGoodsId)
  		getCollection(addressStoreData.value.nmember_id)
  	} else {
  		// console.log('取消收藏')
  		// isCollection.value = false
  		cancelCollection(addressStoreData.value.attentionGoodsId,addressStoreData.value.nmember_id)
  	}
  }
  const detailsMd = (item:AnyObject,index:any) => {
    addressStoreData.value = item
    // storeClass.value = index
    storeInfo.value.open()
    // console.log(item)
  }
  const makeCall = (phoneNumber : any) => {
  	uni.makePhoneCall({
  		phoneNumber: phoneNumber,
  		success: () => {
  			console.log('拨打电话成功');
  			// storeInfo.value.close()
  		},
  		fail: () => {
  			console.log('拨打电话失败');
  		}
  	})
  }
	onPullDownRefresh(() => {
		console.log('下拉')
	})
  onHide(()=>{
    storeInfo.value.close()
  })
	//下拉刷新
	onReachBottom(() => {
		console.log('上拉加载了啊')
	})
	onShow(() => {
		isLogin.value = uni.getStorageSync(global.IS_LOGIN) || false;
		//我常去的  跳转登录之后刷新页面
		if (!isLogin.value) {
			last_time.value = false
			flagAddres.value = false
		}
		if (flagAddres.value && !last_time.value) {
			favoriteList()
		} else {
			loaded.value && getCarLists(longitude.value, latitude.value)
		}
	})
	onLoad((options) => {
		selecShopId.value = options.shopId||shopStore.curSellerMemberId||'';
		console.log(options, "optionsoptions",selecShopId.value)
		source.value = options.source||'';
		propScope.value = options.scope ||'';//指定配送类型-堂食、外卖、自取 shopStore.costPlan
		
		if (userStore.getAdresGps.hasGps) {
			longitude.value = userStore.getAdresGps.longitude;
			latitude.value = userStore.getAdresGps.latitude;
			getCarLists(userStore.getAdresGps.longitude, userStore.getAdresGps.latitude);
			return
		}
		uni.getLocation({
			//获取当前的位置坐标
			type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 的坐标
			success: function (res) {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				longitude.value = res.longitude;
				latitude.value = res.latitude;
				getCarLists(res.longitude, res.latitude)
			},
			fail: function (err) {
				console.log('定位失败', err);
			}
		});

	})
	// const rezParams =()=>{
		
	// }
	// 地址列表
	const processStoreData = (data : any, latitude : any) => {
		let array = [];
		for (let key in data) {
			let dist = latitude ? key.split('.')[0] : '';
			data[key]['distanceUnit'] = dist.length > 3 ? 'km' : 'm';
			dist = dist.length > 3 ? (Number(dist) / 1000).toFixed(2) : dist;
			data[key]['distance'] = dist;
			array.push(data[key]);
		}
    console.log('array',array)
		return array;
	};
	const loaded = ref(false)
	const fetchStoreList = async (paramData : any, apiFunction : any, statue ?: any) => {
		showLoading();
		try {
			let res = await apiFunction(paramData);
			loaded.value = true
			// if (!res.result) throw new Error('获取门店失败!');
			if (!res.result) throw new Error('获取门店失败!');
			hideLoading();
			addressStore.value = processStoreData(res.object, state.latitude);
			//选中地址跳转过来默认选中上一次地址
			if (source.value) {
				// const itemData = JSON.parse(uni.getStorageSync('shopInfos'))
				const indexNum = addressStore.value.findIndex(item => item.nmember_id == selecShopId.value)
				indexNum>=0?storeClass.value = indexNum:'';
				console.log('indexNum',indexNum)
			}

			if (statue) {
				searchedKey.value = addressStore.value.length == 0 ? true : false;
			}
			// console.log('门店数据:', addressStore.value);
		} catch (e) {
			loaded.value = true
			hideLoading();
			mapi.msg('获取门店失败!');
		}
	};
	//门店位置列表
	const getCarLists = async (longitude : any, latitude : any) => {
		console.log('门店位置列表--------------------------------')
		const paramData = {
			longitude: longitude || 113.06463,
			latitude: latitude || 28.208399,
			vtype_two_category: 0,
			vtype: '835',
			// nmember_id: 152998,
			sku:[],
			curPage: curPage.value,
			pageSize: pageSize.value,
			scope: propScope.value//指定配送类型-堂食、外卖、自取
		};
		await fetchStoreList(paramData, getStoreList);
	};
	//我常去的
	const favoriteAddress = async () => {
		last_time.value = false
		flagAddres.value = !flagAddres.value
		console.log('flagAddres.value收藏的门店-----------------------------------------', flagAddres.value)
		if (flagAddres.value && !last_time.value) {
			favoriteList()
		} else {
			storeListFn()
		}
	};

	//收藏
	const favoriteList = async () => {
		const paramData = {
			nowLongitude: longitude.value,
			nowLatitude: latitude.value,
			vtype: 835,
			// nmember_id: 152998,
		};
		await fetchStoreList(paramData, getFollowStoreList);
	}
	//门店列表
	const storeListFn = async () => {
		const paramData = {
			longitude: longitude.value || 113.06463,
			latitude: latitude.value || 28.208399,
			vtype_two_category: 0,
			vtype: '835',
			// nmember_id: 152998,
			curPage: curPage.value,
			pageSize: pageSize.value,
			scope: propScope.value//指定配送类型-堂食、外卖、自取
		};
		await fetchStoreList(paramData, getStoreList);
	}
	//上一次去的
	const lasttimeAddres = async () => {
		flagAddres.value = false
		// last_time.value = !last_time.value
    last_time.value = true
		if (last_time.value) {
      const paramData = {
      	nowLongitude: longitude.value,
      	nowLatitude: latitude.value
      };
      await fetchStoreList(paramData,getLastTimeMd)
			// const itemData = JSON.parse(uni.getStorageSync('shopInfos'))
			// addressStore.value = []
			// addressStore.value.push(paramData.shopInfo)
		}
	}
</script>

<style lang="scss">
  .lizuijing{
    width: 116rpx;
    height: 52rpx;
    border-radius: 49px;
    border: 1px solid #56BF7A;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
    color: #56BF7A;
    font-family: ABeeZee;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
  }
  .cuIcon-right{
    color: #333;
    font-size:28rpx;
    font-weight: normal;
    margin-left: 6rpx;
  }
  // 门店详情
  .storeInfo_c {
  	width: 100vw;
    height: 520rpx;
  	padding: 0rpx 50rpx 0rpx 50rpx;
    background-color:#fff;
    border-radius: 16rpx 16rpx 0 0;
    .tels {
    	color: #53A87F;
    	margin-left: 20rpx;
      font-size:28rpx;
    }
  	.titles_c {
  		text-align: center;
  		color: #333;
  		font-size: 40rpx;
  		font-weight: 700;
      padding-top: 44rpx;
      margin-bottom: 20rpx;
  	}
  
  	.c_cont_n {
  		display: flex;
  		justify-content: space-between;
  
  		.cont_na {
  			color: #333;
  			font-family: "Microsoft YaHei UI";
  			font-size: 40rpx;
  			font-weight: 700;
  			margin-top: 20rpx;
  		}
  
  		.cont_na_l {
  			font-size: 28rpx;
  			color: #666;
  			margin-top: 30rpx;
  		}
  	}
  
  	.door_inf {
  		color: #999;
  		font-family: "Microsoft YaHei UI";
  		font-size: 32rpx;
  		font-weight: 400;
  		margin-top: 20rpx;
  	}
  
  	.store_bt {
  		height: 40rpx;
  		margin-top: 40rpx;
  		display: flex;
  		margin-bottom: 35rpx;
  
  		.bt_item {
  			color: #53A87F;
  			font-family: "Microsoft YaHei UI";
  			font-size: 28rpx;
  			font-weight: 400;
  		}
  
  		.invs_h {
  			width: 2rpx;
  			height: 22rpx;
  			background-color: #999;
  			margin: 8rpx 67rpx 0rpx 67rpx;
  		}
  	}
  
  	.invs {
  		height: 2rpx;
  		background-color: #F3F3F3;
  		margin-top: 40rpx;
  	}
  }
	.hoverFcon {
		color: #53A87F !important;
		font-weight: 700;
	}

	.tit_search_box {
		position: absolute;
		z-index: 109;
		left: 20rpx;
		background: #fff;
		top: -166rpx; //-166 -120
		width: calc(100% - 40rpx);
		height: 200rpx; //200 150
		border-radius: 16rpx;
		box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);

		.search {
			border-radius: 16rpx;
		}

		.search-form {
			margin-top: 30rpx;
			height: 80rpx;
			border: 1px solid #56BF7A;
			box-sizing: border-box;
			box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
		}

		.cuIcon-search.titsbtn {
			padding: 0 24rpx 0 36rpx;
			margin: 0;
			font-size: 34rpx;
			color: #56BF7A;
		}

		.search_bot {
			color: #666;
			margin-top: 30rpx;
			// line-height: 60rpx;
			text-align: center;
      .border-r{
        border-right: 2rpx  solid #E1E1E1;
      }
		}

		.seIco {
			margin-right: 20rpx;
			color: #56BF7A;
			font-size: 30rpx;

			&.org {
				color: #FEB448;
			}
		}
	}

	.titleSearchBox {
		// position: fixed;
		// z-index: 10;
		width: 100%;
		background: #fff;
		padding: 26rpx 34rpx 20rpx 34rpx;

		.input-box {
			height: 60rpx;
			border-radius: 10rpx;
			background: #ededed;
			position: relative;

			input {
				font-size: 24rpx;
				padding-left: 36rpx;
			}

			.cuIcon-search {
				width: 64rpx;
				text-align: center;
				color: #666;
			}
		}
	}

	.map {
		width: 100%;
		height: 40vh;
		background: #2cad8d;
	}

	#bgMap {
		width: 100%;
		height: 40vh;
	}

	.storeBox {
		width: 100%;
		height: 60vh;
		position: relative;
		background: #fafafa;
		padding: 60rpx 20rpx 20rpx 20rpx;

		.empty_box {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			color: #999;
		}

		.title {
			font-weight: 500;
			font-size: 24rpx;
			padding-left: 33rpx;
			line-height: 80rpx;
			background: #f6f6f6;
		}

		.lftext {
			min-width: 100rpx;
		}

		.rtext {
			color: #666;
			padding-right: 34rpx;
			text-align: right;
		}

		.adico {
			display: inline-block;
		}
	}

	#shipSelf {
		width: 100%;
		background: #fff;
		height: 100%;
		border-radius: 16rpx;
		box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
	}

	.shipping-self {

		// height: 100vh;
		// padding-bottom:88rpx;
		.ship-btn {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			background: #f6f6f6;
			font-size: 28rpx;
			height: 88rpx;
			line-height: 88rpx;
			z-index: 99;

			.defin {
				color: #fff;
				background: linear-gradient(90deg, rgba(40, 176, 91, 1) 0%, rgba(70, 183, 155, 1) 100%);
			}
		}

		.scroll-item {
			// &:nth-last-child(1) {
			// }
			padding: 0 30rpx;

			.selc {
				display: none;
			}

			&.active {
				padding-left: 0;
				// background:#D5F4ED;
				background: #f0f0f0;

				.selc {
					display: inline-block;
					// padding-right: 30rpx;
					width: 82rpx;
					font-weight: bold;
					text-align: center;
					font-size: 32rpx;
					color: #2cad8d;
				}
			}
		}

		.item {
			padding: 40rpx 0;

			.distance {
				color: #999;
				min-width: 200rpx;
			}

			.itmlocal {
				width: 0;
				padding-right: 50rpx;
			}

			.toStoreBtn {
          color: #56BF7A;
          font-family: ABeeZee;
          font-size: 28rpx;
          font-weight: 400;
			}

			.item-ms {
				color: #666;
				font-size: 28rpx;
				margin-top: 20rpx;

				.ico {
					margin-right: 12rpx;
				}
			}
		}
	}
</style>